<template>
	<view>
		<navbar  title="订单管理" :isGoBack="true" :isNotice="true" ></navbar>
		<view style="background: #fff;">
			<view class="shop_order">
			  <view :class="(orderType == '1' ? 'order_act' : '')"  @click="changeOrder(1)">店内订单</view>
			  <view :class="(orderType == '2' ? 'order_act' : '')" style="margin-left:20rpx;" @click="changeOrder(2)"> 外卖订单</view>
		    </view>			
		</view>	
		<!-- tab切换 -->
		<view class="node-tab">
			<view class="tab-item" :class="(currentTab == '11' ? 'active' : '')" data-current="11" @click="changeNav(11)">全部</view>
			<view class="tab-item" :class="(currentTab == 1 ? 'active' : '')"    data-current="1"  @click="changeNav(1)">待付款</view>
			<view class="tab-item" :class="(currentTab == 2 ? 'active' : '')"    data-current="2" @click="changeNav(2)" v-if="(orderType==1)">待消费</view>
			<view class="tab-item" :class="(currentTab == 2 ? 'active' : '')"    data-current="2" @click="changeNav(2)" v-if="(orderType==2)">待发货</view>
			<view class="tab-item" :class="(currentTab == 3? 'active' : '')"     data-current="3"  @click="changeNav(3)"  v-if="(orderType==2)">待收货</view>
			<view class="tab-item" :class="(currentTab == 4? 'active' : '')"     data-current="4" @click="changeNav(4)">已完成</view>        
			<!-- <view class="tab-item {{currentTab == 9? 'active' : ''}}" data-current="9" bindtap="changeNav">已退款</view> -->
		</view>
		
		<swiper class="tab-content"  duration="300" bindchange="changeTab" :style="{'height':winHeight+'px'}">	     
		        <swiper-item>
		            <scroll-view :scroll-y="true" class="new-list-box" @scrolltolower="allLoadMore" scroll-top="scrollTop" scroll-with-animation :refresher-enabled="true" refresher-threshold="80" refresher-default-style="white" refresher-background="white" :refresher-triggered="triggered" @refresherrefresh="onAllRefresh">
		                <block v-if="allTabList.length > 0"  v-for="(goods,index1) in allTabList"   :key="index1" >
		                  <view style="background: #fff;margin-bottom: 20rpx;margin-right: 20rpx;margin-left: 20rpx;border-radius: 30rpx;">
		                    <view class="order_main" @click="goDetails(goods.id)">
		                        <view class="flex justify-between ml-25 mr-25 text-dff pt-20" style="border-bottom: 1rpx solid #f3f3f3;">
		                          <view class="flex flex-direction mb-15">
		                              <view>{{goods.shop_name}}</view>
		                              <view class="pt-10 text-xs" style="color: gray;">下单时间：{{goods.create_at}}</view>
		                          </view>
		                          <view style="color: red; margin-top: 10rpx;" v-if="goods.status==1">待付款</view>
		                          <view style='color: #1989fa;margin-top: 10rpx;' v-if="goods.status==2 && orderType==1">已付款</view>
		                          <view style='color: #1989fa;margin-top: 10rpx;' v-if="goods.status==2 && orderType==2">待发货</view>
		                          <view style='color: #E07A3E;margin-top: 10rpx;' v-if="goods.status==3">待收货</view>
		                          <view style='color: gray;margin-top: 10rpx;' v-if="goods.status==0">已取消</view>
		                          <view style='color: orange;margin-top: 10rpx;' v-if="goods.status==4">已完成</view>
		                          <view style='color: green;margin-top: 10rpx;' v-if="goods.status==9">已退款</view>
		                        </view>                      
		                        <t-cell v-for="(item,index) in goods.goods" :key="index">
								    <view class="flex mt-20 mb-20">
									  <view slot='icon' class="flex align-center" >
										<image class="grid-img" :src="item.goods_logo" bindtap="handleChangeGoods" 	mode="scaleToFill"></image>
									  </view>
									  <view class="confirm-wrap-content flex flex-direction justify-between ml-10" slot='content'>
										<view>
										  <view class='flex align-center cell text-lg mb-10'>{{item.goods_title}}</view>
										  <view class='flex align-center cell text-sm text-gray mb-10'>{{item.goods_spec}}</view>
										</view>
										<view class='confirm-wrap-price flex justify-between text-lg'>
										  <text class="text-red">￥{{item.selling_price}}</text>
										  <view>
											×{{item.number}}
										  </view>
										</view>
									  </view>
									</view>
		                        </t-cell>
		                        <view class="flex justify-between ml-25 mr-25 p-10" style="border-top: 1rpx solid #f3f3f3;">
		                          <text class="text-sm">商品小计</text>
		                          <text class="text-sm">￥{{goods.goods_price}}</text>
		                        </view>
		                        <view class="flex justify-between ml-25 mr-25 p-10">
		                          <text class="text-sm">运费</text>
		                          <text class="text-sm">￥{{goods.freight_price}}</text>
		                        </view>
		                        <view class="flex justify-between ml-25 mr-25 p-10">
		                          <text class="text-sm">会员折扣</text>
		                          <text class="text-sm text-red"> - ￥{{goods.discount_money}}</text>
		                        </view>
		                        <view class="flex justify-between ml-25 mr-25 p-10">
		                          <text class="text-sm">优惠券</text>
		                          <text class="text-sm text-red"> - ￥{{goods.redMoney}}</text>
		                        </view>   
		                        <view class="flex justify-between ml-25 mr-25 p-10">
		                          <text class="text-sm">合计</text>
		                          <text class="text-sm">￥{{goods.pay_price}}</text>
		                        </view>
		                    </view>  
		
		                    <view class="flex pb-15 mt-15" style="justify-content:flex-end;margin-right: 20rpx;">    
								<view>
									 <u-button type="success" round size="mini" class="ml-20" custom-style="width:80rpx" text="确认消费" :disabled="disabled" v-if="goods.status==2" @click="payok(goods.id)"></u-button>
								</view>			                    
		                    </view>
		
		                  </view>
		
		                </block>                
		            </scroll-view>
		        </swiper-item>       
		    </swiper>
			
			
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab:11,
				orderType:1,
				winHeight:'',
				pageNo:1,
				triggered: false,   
				allTabList:[], // 全部
				disabled:false,
				loading:true,
			}
		},
		onLoad() {
			let height = uni.getSystemInfoSync().windowHeight;
			this.winHeight = (height - 150);
			this._requestPageList()
		},
		onShow() {
			
		},
		methods:{
			changeOrder(ordertype){			      
				this.orderType=ordertype
				this.allTabList=[]
				this.pageNo=1
			    this._requestPageList(true)    
			},
			changeNav(ordertype){
				this.currentTab=ordertype
				this.allTabList=[]
				this.pageNo=1
				this._requestPageList(true)    
			},
			
			// 参数
			_requestPageList(isLoadMore = false, callback) {
			    if(!isLoadMore){
					this.allTabList=[]; // 全部       
					this.pageNo= 1;				
			    }
			    let opt = {
			      pageNo :this.pageNo,
			      token:uni.getStorageSync('userInfo').app_openid,
				  login_type:'app',
			      orderType:this.orderType,
			      status:this.currentTab,						
			    }			    
			    this._requestPageListCom("virtualTaskList", opt, callback);
			  },
			_requestPageListCom(url, params, callback) {
			  let that=this
			  this.$http.Shoplist(params).then(res => {
				if (res.resCode == "9999") {
					let oldList = [];     
					oldList = this.allTabList;
					const newGoodsList = res.data.list
					const allData = [...oldList, ...newGoodsList]   
					this.allTabList=allData
					if(callback && typeof callback === 'function'){
						callback()
					}				 
				}
			  })
			
			},
			
			// 上拉加载  滚动到底部/右边时触发
			allLoadMore(e){
				let _self = this;
				if (this._allLoadMore) return
				this._allLoadMore = true;
				this.pageNo= ++_self.pageNo				
				this._requestPageList(true, () => {
				  _self._allLoadMore = false;
				});
			},
			
			// 下拉刷新接口
			onAllRefresh() {
			 // 开启下拉自定义样式
				this.triggered = true;
				this.pageNo=1;
				this.allTabList=[];
				this._requestPageList(false, () => {
					// 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
					this.triggered = false;
				});    
			},
			//详情
			goDetails(orderId){
				uni.navigateTo({
					url:"/pages/pagesuser/shopOrder/goDetails/index?orderId="+orderId
				})
			},
			
			//确认消费
			payok(orderid){
				let that=this
				uni.showModal({content: '您确定用户消费了嘛？',title:'提示'}).then(res=>{
				    if(res.confirm){						
						let obj_data={
							token:uni.getStorageSync('userInfo').app_openid,
							login_type:'app',		
							order_id:orderid
						}
						this.$http.orderReceipt(obj_data).then(res=>{
							uni.showToast({title:res.resMessage,icon:'none'}) 
							setTimeout(()=>{							
									that.currentTab=2,
									that.orderType=1,
									that.allTabList=[]							
									that._requestPageList(true);
							},3000)          
						})						  
					}
				})
			}
			  
			  
			
			
			
		}
	}		
</script>

<style>
	
	
	.shop_order{
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  background: rgb(224, 219, 219);
	  border-radius: 13rpx;
	  height: 75rpx;
	  line-height: 73rpx;
	  margin-top: 5rpx;
	  /* padding-left: 14rpx; */
	  margin: 0px 200rpx;
	}
	
	.order_act{
	  background: #fff;
	  margin: 3px;
	  width: 175rpx;
	  text-align: center;
	  line-height: 57rpx;
	  border-radius: 10rpx;
	  margin-left: -11rpx;
	}
	/* .inp-box{
	  padding:10rpx 20rpx 10rpx;
	  box-sizing: border-box;
	  position:relative;
	  background-color: #ffffff;
	} */
	.node-tab{
	  background-color: #ffffff;
	  height:88rpx;
	  font-size:28rpx;
	  line-height: 88rpx;
	  display: flex;
	}
	.node-tab .tab-item{
	  flex:1;
	  text-align: center;
	  color: #666;
	}
	.node-tab .active{
	  color: #ff6700;
	  position: relative;
	}
	.node-tab .active::before{
	  position:absolute;
	  content: " ";
	  bottom:10rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 30rpx;
	    height: 6rpx;
	    background-color: #ff6700;
	    border-radius: 3rpx;
	}
	.tab-content{
	  margin-top:20rpx;
	}
	
	.no-data{
	  text-align: center;
	  box-sizing: border-box;
	  padding-top:230rpx;
	  color: #999999;
	}
	
	/* 更新样式 */
	.node-tab {
	  position: relative;
	}
	.new-list-box {
	  height: 100%;
	} 
	.new-list-item {
	  box-sizing:border-box;
	  /* height:260rpx; */
	  position: relative;
	  background-color: #fff;
	  margin-bottom: 20rpx;
	  padding: 20rpx 30rpx 0;
	}
	
	.new-list-item:last-child {
	  margin-bottom: 0;
	}
	
	.new-list-item view {
	  box-sizing: border-box;
	}
	
	.item-content {
	  display: flex;
	  justify-content: space-between;
	  border-bottom: 1rpx solid #eaeaea;
	  align-items: center;
	  position: relative;
	}
	
	.content-left {
	  width: 100%;
	  padding-bottom: 30rpx;
	}
	
	.content-left .content-title {
	  font-size: 32rpx;
	  color: #333;
	}
	
	.content-left .content-des {
	  font-size: 28rpx;
	  color: #666;
	  margin-top: 10rpx;
	}
	
	.content-deadline {
	  font-size: 24rpx;
	  color: #999;
	}
	
	.content-right {
	  width: 130rpx;
	  flex-shrink: 0;
	  height: 48rpx;
	  border: 1rpx solid #ff6700;
	  color: #ff6700;
	  border-radius: 8rpx;
	  font-size: 24rpx;
	  text-align: center;
	  line-height: 48rpx;
	}
	
	.content-right-is-no {
	  opacity: 0.8;
	  border-color: #999;
	  color: #999;
	}
	
	.item-tag {
	  padding: 10rpx 0 10rpx;
	  font-size: 24rpx;
	}
	
	.list-tag-item {
	  padding: 5rpx 12rpx;
	  text-align: center;
	  background-color: #e5efff;
	  border-radius: 4rpx;
	  margin-right: 10rpx;
	  color: #ff6700;
	  border-radius: 8rpx;
	  margin-bottom: 10rpx;
	  font-size: 24rpx;
	}
	
	.content-right.bg-green {
	  background-color:#e6ffca;
	  border-color: #e6ffca;
	  color:#ff6700;
	  margin-right: 20rpx;
	}
	
	.exchange-btn{
	  text-align: center;
	  margin: 10px 0 0;
	}
	
	.dialog-box{
	  font-size: 28rpx;
	  padding: 30rpx 30rpx 0;
	}
	
	.textarea_css{
	  margin-top: 15rpx;
	  color: #333;
	  height: 160px;
	  border: 1px solid #999;
	  border-radius: 6rpx;
	  padding: 20rpx;
	}
	
	.grid-img{  
	  width: 120rpx;
	  height: 120rpx;
	  margin: 15rpx;
	  border-radius: 10rpx;
	  
	}

</style>